import React from 'react'
import {Form, Input, Button,Icon,Spin,Checkbox,InputNumber, Row, Col } from 'antd';
import {Link} from 'react-router-dom'
import {inject, observer} from "mobx-react/index";

const FormItem = Form.Item;
@inject("store")
@observer
class RegisterBodys extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            confirmDirty: false,
            loading:false
        }
    }

    toggle = (value) => {
        this.setState({ loading: value });
    }
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.toggle(true)
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
            this.props.store.actions.register(values,this.toggle,this.props.form)
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    handleConfirmBlur2 = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
        this.props.store.actions.isRegister(value,this.props.form)
    }
    hasErrors = (fieldsError,status) => {
        if(status==="all")
            return Object.keys(fieldsError).some(field => fieldsError[field]);
        else{
             delete fieldsError.code
            return Object.keys(fieldsError).some(field => fieldsError[field]);
        }
    }
    render() {
        const store=this.props.store
        const { getFieldDecorator, getFieldsError, getFieldError,getFieldValue, isFieldTouched} = this.props.form;
        const usernameError =isFieldTouched('userName') &&getFieldError('userName');
        const phoneError =  isFieldTouched('phoneNo') &&getFieldError('phoneNo');
        const passwordError =  isFieldTouched('password') &&getFieldError('password');
        const codeError =  isFieldTouched('code') &&getFieldError('code');
        return (
            <div className="sign-mainbody2">
                <Spin spinning={this.state.loading}>
                    <h2 className="sign-body-head">加入中国网上博览中心</h2>
                    <Form onSubmit={this.handleSubmit}>
                        <div style={{position:"relative"}}>
                            <div style={{position:"absolute",top:"-20px",fontSize:"12px"}}>用户名</div>
                            <div className="cuk-input">
                                <FormItem
                                    validateStatus={usernameError ? 'error' : ''}
                                    help={usernameError || ""}
                                >
                                    {getFieldDecorator('userName', {
                                        rules: [{ required: true, message: '请输入用户名!' },
                                            {min:2,max:16,message:"用户名在2位到16位之间"}],
                                    })(
                                        <Input size="large" onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                            </div>
                        </div>
                        <div style={{position:"relative"}}>
                            <div style={{position:"absolute",top:"-20px",fontSize:"12px"}}/>
                            <div className="cuk-input">
                                <FormItem
                                    validateStatus={phoneError ? 'error' : ''}
                                    help={phoneError || ""}
                                >
                                    {getFieldDecorator('phoneNo', {
                                        rules: [{ required: true, message: '请输入手机号!' },
                                            {min:11,max:16,message:"手机号在11位到16位之间"}],
                                    })(
                                        <Input placeholder={"手机号"} style={{width:"340px"}} size="large" onBlur={this.handleConfirmBlur2}/>
                                    )}
                                </FormItem>
                            </div>
                        </div>
                        <div style={{position:"relative"}}>
                            <div className="cuk-input">
                                <FormItem
                                    validateStatus={passwordError ? 'error' : ''}
                                    help={passwordError || ""}
                                >
                                    {getFieldDecorator('password', {
                                        rules: [{ required: true, message: '请输入密码!' },
                                            {min:6,max:30,message:"密码在6位到30位之间"}],
                                    })(
                                        <Input type="password" placeholder="密码" size="large" onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                            </div>
                        </div>
                        <FormItem
                            validateStatus={codeError ? 'error' : ''}
                            help={codeError || ""}
                        >
                            <Row gutter={8}>
                                <Col span={16}>
                            {getFieldDecorator('code', {
                                rules: [{ required: true, message: '请输入验证码!' },
                                    {min:6,max:6,message:"验证码为6位"}],
                            })(
                                <Input size="large" style={{width:"210px"}} onBlur={this.handleConfirmBlur}/>
                            )}
                                </Col>
                                <Col span={8}>
                                    <Button  onClick={()=>store.actions.sendCode(getFieldValue("phoneNo"))} type="primary" style={{padding:"0",width:"100%"}} size={"large"}  disabled={this.hasErrors(getFieldsError(),"part")||store.isSend!=0}>{store.isSend===0?"发送验证码":store.isSend+"S"}</Button>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem>
                            <Button className="sign-button" type="primary" htmlType="submit"  disabled={this.hasErrors(getFieldsError(),"all")}>注册</Button>
                        </FormItem>
                    </Form>
                    <div className="to-other"  style={{height:"21px"}}>
                        <span className="sign-to-other">已有账号？
                        <Link to="/sign/login">马上登陆</Link>
                    </span>
                    </div>
                    <div style={{marginTop: "25px",textAlign:"center"}}>
                        <div className="otherlogin-line">
                            <div className="heng"/>
                            <span className="otherlogin-text">或使用以下账号登录</span>
                            <div className="heng"/>
                        </div>
                        <ul style={{marginTop:"15px"}}>
                            <li><Link to="#"><Icon className="weixinicon" type="wechat" /></Link></li>
                        </ul>
                    </div>
                </Spin>
            </div>
        );
    }
}
const RegisterBody = Form.create()(RegisterBodys);
export default RegisterBody